<!--
  Copyright (c) 2011 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.

  To run this sample, replace YOUR API KEY with your application's API key.
  It can be found at https://code.google.com/apis/console/?api=plus under API Access.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <script>
      // Enter the API key from the Google Develoepr Console - to handle any unauthenticated
      // requests in the code.
      // The provided key works for this sample only when run from
      // https://google-api-javascript-client.googlecode.com/hg/samples/plusProfileSearch.html
      // To use in your own application, replace this API key with your own.
      var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';

      function load() {
        gapi.client.load('plus', 'v1', showSearch);
      }

      function showSearch() {
        document.getElementById('queryFields').style.display = '';
      }

      // Request smaller images from photos to save bandwidth
      function resizeImage(imageUrl) {
        var lastSlash = imageUrl.lastIndexOf('/');
        var resizedUrl = imageUrl.substring(0, lastSlash) + '/w256' +
            imageUrl.substr(lastSlash);
        return resizedUrl;
      }

      function makeRequest() {
        function writeResponse(resp) {
          var infoDiv = document.getElementById('info');
          infoDiv.innerHTML = '';
          if (!resp.items) { return; }
          var responseTitle = document.createElement('strong');
          responseTitle.appendChild(
              document.createTextNode('Profiles results for ' + query + ':'));
          infoDiv.appendChild(responseTitle);

          for (var i = 0; i < resp.items.length ; i++) {
            var profileResult = resp.items[i];
            var profileInfo = document.createElement('P');

            if (profileResult.image && profileResult.image.url) {
              var profilePic = document.createElement('IMG');
              profilePic.src = resizeImage(profileResult.image.url);
              profileInfo.appendChild(profilePic);
            }

            var profileLink = document.createElement('A');
            profileLink.style.marginLeft = '5px';
            profileLink.href = profileResult.url;
            profileLink.appendChild(
                document.createTextNode(profileResult.displayName));
            profileInfo.appendChild(profileLink);

            infoDiv.appendChild(profileInfo);
          }
        }

        var query = document.getElementById('query').value;
        gapi.client.setApiKey(apiKey);
        var request = gapi.client.plus.people.search({
          'query': query
        });
        request.execute(writeResponse);
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=load"></script>
  </head>

  <body>
    <p>Enter a query to search Google+ Profiles</p>
    <div id="queryFields" style="display:none;">
      <label for="query">Query </label>
      <input id="query" type="text" />
      <button onclick="makeRequest();">
        Search Google+ Profiles
      </button>
    </div>
    <div id="info"></div>
  </body>
</html>
